<template>
    <div id="amap_container"></div>
</template>

<script setup>
    import AMapLoader from "@amap/amap-jsapi-loader";

    let map = null

    onMounted(() => {
        window._AMapSecurityConfig = {
            securityJsCode: '68060bcd134cf1b75660a400cd7c776e'
        }
        AMapLoader.load({
            key: "0f6a97d191222a71069e381c3e64cd3f", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
                map = new AMap.Map("amap_container", {

                    // 设置地图容器id
                    viewMode: "2D",
                    zoom: 8.6, // 初始化地图级别
                    center: [121.32235,46.443658], // 初始化地图中心点位置
                    mapStyle:'amap://styles/adb6e356ca455a3bafdb8d2b72a4e469',

                });

            const disProvince = new AMap.DistrictLayer.Province({
                zIndex: 12,
                adcode: ['152221'],
                depth: 2,
                styles: {
                    'fill': '#000000'
                }
            });

            disProvince.setMap(map);
            })
            .catch((e) => {
                console.log(e);
            });
    });

    onUnmounted(() => {
        map?.destroy();
    });

</script>

<style scoped lang="less">
    #amap_container{
        width: 100%;
        height: 100%;
    }
</style>